<!--自定义表情配置-->
<script setup>
import {useStore} from "vuex";
import {customEmotes} from "@/assets/js/CustomEmotes";
import {onMounted, ref} from "vue";

const store = useStore();

// 启用的自定义表情组名
const enableCustomEmotes = ref();

onMounted(() => {
  enableCustomEmotes.value = store.state.Resources.enableCustomEmotes
})

// 修改配置时更新
const onUpdate = (data) => store.commit("Resources/setCustomEmotes", data)

</script>

<template>
  <div>
    <h4>启用的自定义表情(配置自动保存)</h4>
    <el-checkbox-group v-model="enableCustomEmotes" @change="onUpdate">
      <el-checkbox v-for="parent in customEmotes" :label="parent.name">
        <el-tooltip placement="right">
          <template #content>
            包含分组
            <ul>
              <li v-for="group in parent.groups">{{ group.name }}</li>
            </ul>
          </template>
          <span>{{ parent.name }}</span>
        </el-tooltip>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<style scoped>

</style>